<template>
  <div class="details">
    <!-- 导航栏 -->
    <van-nav-bar
      fixed
      left-arrow
      @click-left="$router.go(-1)"
      title="文章详情"
    ></van-nav-bar>
    <!-- 标题 -->
    <h1>{{ item.title }}</h1>
    <div class="author">
      <van-image
        :src="`http://124.223.14.236:8060/${item.pic}`"
        round
        width="1rem"
        height="1rem"
        fit="fill"
      />
      <div class="text">
        <p class="name">{{ item.author }}</p>
        <p class="time">{{ formatMsgTime(item.create_date) }}</p>
      </div>
    </div>
    <p class="content" v-html="item.content"></p>
    <!-- 内容 -->
    <div class="markdown-body"></div>
    <van-divider>正文结束</van-divider>

    <!-- 相关推荐 -->
    <p style="font-size: 16px">相关推荐</p>
    <van-grid :column-num="2">
      <van-grid-item text="文字" v-for="item in recommend" :key="item.id">
        <van-image :src="`http://124.223.14.236:8060/${item.pic}`" />
        <span class="van-multi-ellipsis--l2">{{ item.catename }}</span>
      </van-grid-item>
    </van-grid>
    <!-- 底部 收藏点赞 -->
    <van-tabbar>
      <van-tabbar-item
        :icon="icon ? 'star' : 'star-o'"
        @click="changeState1"
      ></van-tabbar-item>
      <van-tabbar-item
        :icon=" icon1 ? 'thumb-circle' : 'thumb-circle-o'"
        @click="changeState2"
      ></van-tabbar-item>
      <van-tabbar-item icon="share"></van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { detailApi } from '@/api/article'
import { likeAndCollApi } from '@/api/user'
// import { myDianzanApi } from '@/api/user'
export default {
  name: 'DetailPage',
  data () {
    return {
      id: this.$route.params.id,
      icon: '', // 控制收藏
      icon1: '', // 控制点赞
      item: {},
      recommend: [],
      type: 1,
      article_id: null,
      action: 'add'
    }
  },
  async created () {
    const res = await detailApi({ id: this.id })
    this.item = res.data.data.info
    this.recommend = res.data.data.recommend
    this.article_id = res.data.data.info.id
    this.icon = res.data.data.info.isCollect
    this.icon1 = res.data.data.info.isLike
  },
  methods: {
    async changeState1 () {
      this.icon = !this.icon
      if (this.icon) {
        await likeAndCollApi({
          type: this.type,
          article_id: this.article_id,
          action: this.action
        })
        this.$toast.success('收藏成功')
      } else {
        await likeAndCollApi({
          type: this.type,
          article_id: this.article_id,
          action: this.action = 'del'
        })
        this.$toast.success('取消收藏')
      }
    },
    async changeState2 () {
      this.icon1 = !this.icon1
      if (this.icon1) {
        await likeAndCollApi({
          type: this.type = 2,
          article_id: this.article_id,
          action: this.action
        })
        this.$toast.success('点赞成功')
      } else {
        await likeAndCollApi({
          type: this.type = 2,
          article_id: this.article_id,
          action: this.action = 'del'
        })
        this.$toast.success('取消点赞')
      }
    },
    // 将时间戳转成时间
    formatMsgTime (timespan) {
      const dateTime = new Date(timespan) // 将传进来的字符串或者毫秒转为标准时间
      const year = dateTime.getFullYear()
      const month = dateTime.getMonth() + 1
      const day = dateTime.getDate()
      const hour = dateTime.getHours()
      const minute = dateTime.getMinutes()
      // var second = dateTime.getSeconds()
      const millisecond = dateTime.getTime() // 将当前编辑的时间转换为毫秒
      const now = new Date() // 获取本机当前的时间
      const nowNew = now.getTime() // 将本机的时间转换为毫秒
      let milliseconds = 0
      let timeSpanStr
      milliseconds = nowNew - millisecond
      if (milliseconds <= 1000 * 60 * 1) {
        // 小于一分钟展示为刚刚
        timeSpanStr = '刚刚'
      } else if (
        1000 * 60 * 1 < milliseconds &&
        milliseconds <= 1000 * 60 * 60
      ) {
        // 大于一分钟小于一小时展示为分钟
        timeSpanStr = Math.round(milliseconds / (1000 * 60)) + '分钟前'
      } else if (
        1000 * 60 * 60 * 1 < milliseconds &&
        milliseconds <= 1000 * 60 * 60 * 24
      ) {
        // 大于一小时小于一天展示为小时
        timeSpanStr = Math.round(milliseconds / (1000 * 60 * 60)) + '小时前'
      } else if (
        1000 * 60 * 60 * 24 < milliseconds &&
        milliseconds <= 1000 * 60 * 60 * 24 * 15
      ) {
        // 大于一天小于十五天展示位天
        timeSpanStr = Math.round(milliseconds / (1000 * 60 * 60 * 24)) + '天前'
      } else if (
        milliseconds > 1000 * 60 * 60 * 24 * 15 &&
        year === now.getFullYear()
      ) {
        timeSpanStr = month + '-' + day + ' ' + hour + ':' + minute
      } else {
        timeSpanStr =
          year + '-' + month + '-' + day + ' ' + hour + ':' + minute
      }
      return timeSpanStr
    }
  }
}
</script>

<style lang="less" scoped>
.details {
  padding: 46px 10px 0 10px;
  h1 {
    padding: 25px 10px;
    font-size: 20px;
  }
  .author {
    padding: 10px 0;
    display: flex;
    .text {
      flex: 1;
      padding-left: 10px;
      line-height: 1.3;
      .name {
        font-size: 14px;
        margin: 0;
      }
      .time {
        margin: 0;
        font-size: 12px;
        color: #999;
      }
    }
  }
}
.markdown-body {
  ::v-deep {
    img {
      width: 90%;
    }
  }
}
.van-image {
  width: 120px;
  height: 100px;
}
.van-tabbar-item {
  color: rgb(119, 119, 119);
}
.content {
  margin-top: 20px;
  margin-left: 8px;
  width: 100%;
  /deep/.a-image img {
    width: 80%;
  }
}
</style>
